button {
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: $buttonHeight;
  &[aria-disabled="true"] {
    opacity: 0.5;
  }
}

button[plain] {
  border: none;
}

.button {
  &.cta {
    flex: 1 0 auto;
  }

  &.cta--white,
  &.cta--white-no-border {
    background-color: $colorWhite;
  }

  &.cta--white {
    border: 1px solid $colorDark;
  }

  &.cta--transparent {
    background-color: transparent;
    border: 1px solid $colorDark;
  }

  &.cta--carousel-semi-transparent {
    background-color: rgba($colorDark, 0.2);
    border: 1px solid $colorWhite;
    color: $colorWhite;
  }

  &.cta--white-opacity {
    background-color: rgba(254, 252, 247, 0.8);
    border: 1px solid $colorDark;
  }

  &.cta--dark {
    background-color: $colorDark;
  }

  &.cta--exhibition {
    background-color: $colorExhib;
  }

  &.cta--viking {
    background-color: $colorViking;
    border: 1px solid $colorViking;

    &-inactive {
      border: 1px solid $colorViking;
      background-color: transparent;
      color: $colorDark;
    }
  }
}
